<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head th:include="base/head::head"/>
    <!--菜单表-->
    <body>
        <div th:replace="base/load::load"/>
        <div th:replace="base/icon::icon"/>
        <div id="table-tool">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="onOpenLocalAddDialog()">新增</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="onOpenLocalEditDialog()">修改</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="onTreeRemove()">删除</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-node-open',plain:true" onclick="onNodeOpen()">展开</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-node-close',plain:true" onclick="onNodeClose()">收起</a>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-refresh',plain:true" onclick="onRefresh('tree')">刷新</a>
        </div>
        <table id="table" class="easyui-treegrid" data-options="url:'tree',method:'get',onLoadSuccess:onTreeLoadSuccess,idField:'id',treeField:'menuName',fit:true,singleSelect:true,rownumbers:true,toolbar:'#table-tool'">
            <thead>
                <tr>
                    <th data-options="field:'id',checkbox:true"></th>
                    <th data-options="field:'menuName',width:220">名称</th>
                    <th data-options="field:'menuPath',width:160">路径</th>
                    <th data-options="field:'showOrder',width:80">排序</th>
                    <th data-options="field:'menuType',width:100">菜单类型</th>
                    <th data-options="field:'formName',width:100">表单标识</th>
                    <th data-options="field:'menuComment',width:100">菜单备注</th>
                </tr>
            </thead>
        </table>
        <!--弹出框-->
        <div id="dialog" class="easyui-dialog uq_dialog" data-options="title:'操作',modal:true,closed:true,buttons:'#dialog-tool'">
            <form id="form" method="post">
                <input id="id" name="id" type="hidden"/>
                <table>
                    <tr>
                        <td>菜单名称:</td>
                        <td>
                            <input id="menuName" name="menuName" class="easyui-textbox" style="width: 200px" data-options="required:true,validType:'length[1,64]',prompt:'名称'"/>
                        </td>
                        <td>上级菜单:</td>
                        <td>
                            <div id="ipid" name="ipid" class="easyui-combotree" style="width: 200px" data-options="required:true"/>
                        </td>
                    </tr>
                    <tr>
                        <td>图标:</td>
                        <td>
                            <input id="btnIcon" name="menuIcon" value="icon-default" type="hidden"/>
                            <a href="javascript:void(0)" class="easyui-tooltip" style="text-decoration: none; font-size: 10px" data-options="
                                hideEvent: 'none',
                                content: function(){
                                    $('#iconDiv').show();
                                    return $('#iconDiv');
                                },
                                onShow: function(){
                                    var t = $(this);
                                    t.tooltip('tip').focus().unbind().bind('blur',function(){
                                        t.tooltip('hide');
                                    });
                                }
                            ">
                                <span id="icon-uq-show" class="icon-add" style="width: 16px;height: 16px;display:block"/>
                            </a>
                        </td>
                        <td>路径:</td>
                        <td>
                            <input id="menuPath" name="menuPath" class="easyui-textbox" style="width: 200px" data-options="required:true,validType:'length[1,32]',prompt:'菜单路径'"/>
                        </td>
                    </tr>
                    <tr>
                        <td>排序:</td>
                        <td>
                            <input id="showOrder" name="showOrder" class="easyui-numberspinner" style="width: 200px" data-options="min:0,required:true,prompt:'排序'"/>
                        </td>
                        <td>菜单类型:</td>
                        <td>
                            <select id="menuType" name="menuType" class="easyui-combobox" style="width: 200px" data-options="value:0,panelHeight:'auto',required:true,prompt:'菜单类型',onChange:onMenuTypeChange">
                                <option value="0">系统</option>
                                <option value="1">自定义</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>业务标识:</td>
                        <td>
                            <select id="formName" name="formName" class="easyui-combobox" style="width: 200px" data-options="url:'../form/list?formStatus=1',valueField:'formName',textField:'formDisplay',method:'get',panelHeight:'auto',onChange:onFormNameChange,prompt:'菜单为自定义时必填'"/>
                        </td>
                        <td>备注:</td>
                        <td>
                            <input id="menuComment" name="menuComment" class="easyui-textbox" style="width: 200px" data-options="validType:'length[1,256]',prompt:'菜单备注'"/>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
        <div id="dialog-tool">
            <a id="dialog-save" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" onclick="treeSave()">保存</a>
            <a id="dialog-close" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-close'" onclick="javascript:$('#dialog').dialog('close')">关闭</a>
        </div>

        <script type="text/javascript" th:src="@{/utils/System.js}"></script>
        <script type="text/javascript">

            function onTreeRemove() {
                var rows = $("#table").datagrid("getSelections");
                if (rows == null || rows.length == 0) {
                    AlertUtil.warning("请选择后，再操作！");
                    return;
                }
                if (rows.length != 1) {
                    AlertUtil.warning("每次只能操作一条数据！");
                    return;
                }
                var row = rows[0];
                var nodes = $("#table").treegrid("getChildren", row.id);
                // 只能删除叶子节点
                if (nodes != null && nodes.length == 0) {
                    onRemove("tree");
                } else {
                    AlertUtil.info("只能选择叶子节点处理！")
                }
            }

            // 菜单类型改变
            function onMenuTypeChange(newValue, oldValue) {
                if (newValue == 1) {
                    $("#formName").combobox({"required": true})
                } else {
                    $("#formName").combobox({"required": false})
                }
            }

            // 菜单类型为自定义时，路径是自动生成
            function onFormNameChange(newValue, oldValue) {
                $("#menuPath").textbox("setValue", "../biz/index?fn=" + newValue);
            }


            function onTreeLoadSuccess(row, data) {
                var items = $("#table").treegrid("getData");
                items.splice(0, 0, {"id": 0, "text": "顶级", "iconCls": "icon-default", "_parentId": ""});
                $("#ipid").combotree("loadData", items);
            }

            function treeSave() {
                this.onSave("", "tree");
            }

            function onOpenLocalAddDialog() {
                onOpenAddDialog();
                $("#ipid").combotree("setValue", 0);
                $("#btnIcon").val("icon-default");
                $("#icon-uq-show").attr("class", "icon-default");
            }

            function onOpenLocalEditDialog() {
                onOpenEditDialog();
                var rows = $("#table").datagrid("getSelections");
                if (rows == undefined || rows == null || rows == "") {
                    AlertUtil.error("请选择后，再操作！");
                    return;
                }
                if (rows.length != 1) {
                    AlertUtil.error("只能选择一条数据，再操作！");
                    return;
                }
                var row = rows[0];
                // 设置图标
                $("#icon-uq-show").attr("class", row.menuIcon || "icon-default");
            }

            function onNodeOpen() {
                $("#table").treegrid("expandAll", "")
            }

            function onNodeClose() {
                $("#table").treegrid("collapseAll", "")
            }
        </script>
    </body>
</html>

